<template>
  <div class="home-container">
    <Header title="北京市望京SOHU百度公司">
      <span slot="left">搜索</span>
      <span slot="right">定位</span>
    </Header>
    <div class="swiper">
      <div class="swiper-container">
        <div class="top">
          <div class="item">
            <img src="./image/1.jpg" alt="" />
            <span>外卖</span>
          </div>
          <div class="item">
            <img src="./image/2.jpg" alt="" />
            <span>新店开业</span>
          </div>
          <div class="item">
            <img src="./image/3.jpg" alt="" />
            <span>水果</span>
          </div>
          <div class="item">
            <img src="./image/4.jpg" alt="" />
            <span>汉堡</span>
          </div>
          <div class="item">
            <img src="./image/5.jpg" alt="" />
            <span>特惠</span>
          </div>
          <div class="item">
            <img src="./image/6.jpg" alt="" />
            <span>一元抢购</span>
          </div>
          <div class="item">
            <img src="./image/7.jpg" alt="" />
            <span>小蓝转送</span>
          </div>
          <div class="item">
            <img src="./image/8.jpg" alt="" />
            <span>炸鸡</span>
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <img src="./image/14.jpg" alt="" />
            <span>外卖</span>
          </div>
          <div class="item">
            <img src="./image/12.jpg" alt="" />
            <span>新店开业</span>
          </div>
          <div class="item">
            <img src="./image/13.jpg" alt="" />
            <span>水果</span>
          </div>
          <div class="item">
            <img src="./image/10.jpg" alt="" />
            <span>汉堡</span>
          </div>
          <div class="item">
            <img src="./image/9.jpg" alt="" />
            <span>特惠</span>
          </div>
          <div class="item">
            <img src="./image/9.jpg" alt="" />
            <span>一元抢购</span>
          </div>
          <div class="item">
            <img src="./image/1.jpg" alt="" />
            <span>小蓝转送</span>
          </div>
          <div class="item">
            <img src="./image/2.jpg" alt="" />
            <span>炸鸡</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="shoplist"
      style="margin-bottom: 3rem; margin-top: 1rem"
    >
      <p style="margin: 5px 0 5px 5px">附近商家</p>
      <ul class="shop-container">
        <li class="item" @click="$router.push('/shop')" style="margin-top:5px">
          <div class="item-container" style="margin: 5px; display: flex;position: relative;">
            <img
              src="https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1912067988.jpg"
              alt=""
              style="width: 60px; height: 60px"
            />
            <div class="info" style="margin: 0 5px;display:flex;flex-direction: column;">
              <div class="header" style="flex:1;display:flex;align-items:center;">
                <el-tag type='warning' effect="dark" size='mini'>品牌</el-tag>&nbsp;&nbsp;
                <span>天津灌汤包</span>
              </div>
              <div class="hot" style="font-size: 10px; flex:1;display: flex;align-items:center;">
                <span class="rate_month" style="display:flex;align-items: center;">月售100单&nbsp;&nbsp;</span>
                <el-rate
                  :value='score'
                  disabled
                  show-score
                  text-color="#bfa"
                >
                </el-rate>
              </div>
              <div class="need" style="font-size: 12px;flex:1;display:flex;align-items:center;">
                <span>￥20起送 / 配送费约￥5</span>
              </div>
            </div>
            <div class="tag" style="position: absolute;right: 5px;">
              <div class="sure" style="display:flex;">
                <el-tag type="success" size='mini' style="margin-right:3px">保</el-tag>
                <el-tag type="success" size='mini' style="margin-right:3px">准</el-tag>
                <el-tag type="success" size='mini' style="margin-right:3px">返</el-tag>
              </div>
              <br>
              <el-tag effect="dark" size='mini'>兰骑士专送</el-tag>
            </div>
          </div>
        </li>
        
      </ul>
    </div>
  </div>
</template>
<script>
import Header from "../../components/Header/Header";
export default {
  name: "Home",
  components: {
    Header,
  },
  data() {
    return {
      count: [],
      score:3.5,
    };
  },
  mounted() {
    let count = [];
    for (let i = 0; i < 50; i++) {
      count.push(i);
    }
    this.count = count;
  },
  methods: {},
};
</script>
<style lang="less" scoped>
@keyframes mar {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: -80px;
  }
  50% {
    margin-left: -160px;
  }
  75% {
    margin-left: -240px;
  }
  100% {
    margin-left: -320px;
  }
}

.swiper {
  width: 100%;
  
  overflow: hidden;
  .swiper-container {
    animation: mar 5s linear infinite;
    width: 640px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    img {
      width: 80px;
      height: 80px;
    }
    .top {
      display: flex;
    }
    .bottom {
      display: flex;
    }
  }
}
.shoplist {
  // background: crimson;
  overflow: scroll;
  height: 280px;
}

//评分条的大小
/deep/ .el-rate__icon,
/deep/ .el-rate__text {
  font-size: 10px;
}
//评分条内容居中
.el-rate{
  display: flex;
  align-items: center;
}
.item-container{
  position: relative;
  border-bottom: 1px pink solid;
}
</style>
